<template>
<div>	
	<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
			  	<el-col :span="24">
			  		<div class="grid-content bg-purple-dark"></div>
					<el-form-item lable="条款代码" style="width: 10%;">
						<el-input v-model="formData.kindcode" size="small" placeholder="条款代码"></el-input>
					</el-form-item>
					<el-form-item lable="备案号名称">
						<el-input v-model="formData.efilecname" size="small" placeholder="备案号名称"></el-input>
					</el-form-item>
					<!-- <el-form-item lable="管理类别"  label-width="150px" :span="3">
						<el-input v-model="formData.managetype" size="small" placeholder="管理类别"></el-input>
					</el-form-item> -->
					<el-form-item lable="险别代码" style="width: 10%;">
						<el-select v-model="formData.classcode" placeholder="险别代码" filterable clearable size="small">
							<el-option v-for="item in classOptions" :key="item.classcode" :label="item.classcode + '-' + item.classname" :value="item.classcode"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item lable="创建日期">
						<el-date-picker type="date" placeholder="创建日期" v-model="formData.createdate" size="small"></el-date-picker>
					</el-form-item>
					<el-form-item lable="是否有效"  style="width: 10%;">
						<el-select v-model="formData.validatestatus" placeholder="是否有效" size="small">
							<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<!-- 当前需求备案号仅匹配到条款，故无法按险种进行查询 -->
					<!-- <el-form-item lable="险种代码" label-width="150px" :span="3">
						<el-select v-model="formData.riskcode" placeholder="险种代码" filterable size="small" style="width: 178px">
							<el-option v-for="item in riskOptions" :key="item.riskcode" :label="item.riskcode + '-' + item.riskcname" :value="item.riskcode"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item>
						<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click="reset()">
							<i class="fa fa-undo"></i>
							重置
						</el-button>
					</el-form-item>
			  	</el-col>
			</el-form>
		</el-col>

		<el-table :data="tableData" v-loading="loading" element-loading-text="处理中......" ref="multipleTable" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected" @sort-change="orderBy" @row-dblclick="showDetail" @row-click="rowSelete">
		 	<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="kindcode" label="条款代码" sortable="custom" width="130"></el-table-column>
			<el-table-column prop="kindcname" label="条款名称" sortable="custom" show-overflow-tooltip min-width="250"></el-table-column>
			<el-table-column prop="kindversion" label="条款版本" sortable="custom" width="120"></el-table-column>
			<el-table-column prop="efilecname" label="备案号名称" sortable="custom" show-overflow-tooltip min-width="250"></el-table-column>
			<el-table-column prop="kindversion" label="备案号版本" sortable="custom" width="130"></el-table-column>
			<el-table-column prop="imgname" label="文件名称" show-overflow-tooltip sortable="custom" width="130"></el-table-column>
			<el-table-column prop="managetype" label="管理类别" sortable="custom" width="120" :formatter="manageTypeFormater"></el-table-column>
			<el-table-column prop="validatestatus" label="是否有效" sortable="custom" width="120" :formatter="validFormater"></el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
				<el-col :span="14">
					<el-col :span="24">
						<el-form-item>
							<el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="openEditDialog()" icon="edit">修改</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="default" @click="openLogDialog()"><i class="fa fa-search-plus"></i> 查看日志</el-button>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="10">
					<div class="block" style="float:right">
					    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					      :current-page="formData.currentPage"
					      :page-sizes="[15, 30, 45]"
					      :page-size="formData.pageSize"
					      layout="total, sizes, prev, pager, next, jumper"
					      :total="total">
					    </el-pagination>
					  </div>
				</el-col>
			</el-form>
		</el-col>
		

		  <EFileAdd v-if="showAddDialog"></EFileAdd>
		  <EFileEdit v-if="showEditDialog"></EFileEdit>
		  <EFileDetail v-if="showDetailDialog"></EFileDetail>
		  <Log v-if="showLogDialog"></Log>

</div>
</template>

<script>
import EFileAPI from "../../../js/production/eFile/eFileAPI"
import ClassAPI from "../../../js/production/class/classAPI"
import RiskAPI from "../../../js/production/risk/riskAPI"
import dateUtil from "../../../common/js/dateUtil"
import Utils from"../../../js/production/utils";
import EFileAdd from "./dialog/EFileAdd";
import EFileEdit from "./dialog/EFileEdit";
import EFileDetail from "./dialog/EFileDetail";
import Log from "../common/Log";
export default {
  components : {
  	EFileAdd,
  	EFileEdit,
  	EFileDetail,
  	Log
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    kindcode: '',
	                    efilecname: '',
	                    managetype: '',
	                    createdate: undefined,
	                    validatestatus: '',
	                    riskcode: '',
	                    classcode: '',
	                    orderBy: '',
	                    order: '',
    		},
    		tableData: [],
    		selectedRows: [],
    		total: 0,
		riskOptions: [],
		classOptions: [],
		validOptions: [{
			label : '有效',
			value: '1'
		},{
			label : '无效',
			value: '0'
		}],
		isSortRequest: false,	//是否请求 
		showEditDialog: false,
		showAddDialog: false,
		showDetailDialog: false,
		showLogDialog: false,
		rowDetail: {},
		tableHeight: 0,
		loading : false,
	}
  },
  mounted() {
  	ClassAPI.initClassSelect(this);
  	RiskAPI.initRiskSelect(this);
  	this.tableHeight = Utils.getScreenHeight()*0.72;
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  },
  methods: {
		dateFormater(row,  column) {  
			var  date  =  row[column.property];            
			if  (date  ==  undefined)  {               
				return  "";            
			}  
			return dateUtil.getDateyMd(date);
		},
		validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
		manageTypeFormater(row,  column) {
			let managetype = row[column.property];
			if (managetype ==  undefined)  {               
				return  "";            
			}  
			if (managetype == 1) {
				return "审批";
			}
			if (managetype == 2) {
				return "备案";
			}
			if (managetype == 3) {
				return "报告";
			}
			if (managetype == 4) {
				return "全部";
			}
		},
		rowSelected(rows) {
			this.selectedRows = rows;
		},
		queryData() {
			if (this.formData.createdate === '') {
				this.formData.createdate = undefined;
			}
			EFileAPI.query(this);
		},
		reset() {
			this.formData.kindcode = '';
	                    	this.formData.efilecname = '';
	                    	this.formData.managetype = '';
	                    	this.formData.createdate = undefined;
	                    	this.formData.validatestatus = '';
	                    	this.formData.riskcode = '';
	                    	this.formData.classcode = '';
	                    	this.formData.currentPage = 1;
	                    	EFileAPI.query(this);
		},
		handleSizeChange(val) {
			this.formData.pageSize = val;
			EFileAPI.query(this);
		},
		handleCurrentChange(val) {
			this.formData.currentPage = val;
			EFileAPI.query(this);
		},
		orderBy(column, prop, order) {
			if (typeof(column) != 'undefined') {
				this.formData.orderBy = column.prop;
				if (column.order == 'descending') {
					this.formData.order = 'desc';
				} else {
					this.formData.order = 'asc';
				}
			}
			if (this.isSortRequest) {
				this.isSortRequest = false;
				EFileAPI.query(this);
			}
		},
		showDetail(row, event) {
			this.rowDetail = row;
			this.showDetailDialog = true;
		},
		rowSelete(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		openAddDialog() {
			EFileAPI.openAddDialog(this);
		},
		openEditDialog() {
			EFileAPI.openEditDialog(this);
		},
		openLogDialog() {
			EFileAPI.openLogDialog(this);
		},
		showDetail(row, event) {
			this.rowDetail = row;
			this.showDetailDialog = true;
		},
  }
}
</script>